<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="推送设置" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="baibox">
			<view class="baili">
				<view class="zhan">
					消息推送总开关
					<view class="bnt">
						开启后，你允许的内容类型会提醒你
					</view>
				</view>
				<u-switch v-model="userInfo.sel_nick" :inactiveValue="1"
					:activeValue="0" inactiveColor="#888EB6" size="20" activeColor="#45C4B0"
					@change="change('sel_nick')"></u-switch>
			</view>
		</view>
		
		<view class="baibox">
			<view class="baili">
				<view class="zhan">
					互动通知
					<view class="bnt">
						用户评价通知、内容点赞通知等
					</view>
				</view>
				<u-switch v-model="userInfo.is_fensi" :inactiveValue="0"
					:activeValue="1" inactiveColor="#888EB6" size="20" activeColor="#45C4B0"
					@change="change('is_fensi')"></u-switch>
			</view>
			<view class="baili" >
				<view class="zhan">
					系统通知
					<view class="bnt">
						账号功能开放通知，平台申诉反馈等
					</view>
				</view>
				<u-switch v-model="userInfo.sel_fens" :inactiveValue="1"
					:activeValue="0" inactiveColor="#888EB6" size="20" activeColor="#45C4B0"
					@change="change('sel_fens')"></u-switch>
			</view>
			<view class="baili" >
				<view class="zhan">
					订单通知
					<view class="bnt">
						订单流程通知，异常订单状态等
					</view>
				</view>
				<u-switch v-model="userInfo.sel_fens" :inactiveValue="1"
					:activeValue="0" inactiveColor="#888EB6" size="20" activeColor="#45C4B0"
					@change="change('sel_fens')"></u-switch>
			</view>
			<view class="baili" >
				<view class="zhan">
					写手通知
					<view class="bnt">
						认证审核通知、团队审核通知
					</view>
				</view>
				<u-switch v-model="userInfo.sel_fens" :inactiveValue="1"
					:activeValue="0" inactiveColor="#888EB6" size="20" activeColor="#45C4B0"
					@change="change('sel_fens')"></u-switch>
			</view>
		</view>
		
		<!-- <view class="ti" @click="submit(true)">
			保存
		</view> -->
	</view>
</template>

<script>
	export default {
		data(){
			return {
				userInfo: {}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		padding-top: 20rpx;

		.baibox {
			background-color: #FFFFFF;
			padding: 0 68rpx;
			margin-bottom: 20rpx;

			.baili:last-child {
				border-bottom: none;
			}

			.baili {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				
				.zhan {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					.bnt{
						color: #999;
						font-size: 11px;
						font-weight: 500;
					}	
				}

				.left {
					flex-shrink: 0;

					.title {
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						padding-bottom: 10rpx;
						.bnt{
							color: #999;
							font-size: 11px;
							font-weight: 500;
						}
					}

					.txt {
						font-size: 24rpx;
						font-weight: normal;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
				}

				.centxt {
					font-size: 28rpx;
					font-weight: normal;
					text-align: right;
					letter-spacing: 0em;
					color: #999999;
					width: 440rpx;
				}

				.cenbox {
					flex-grow: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding: 0 16rpx;

					.headpic {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.centxt {
						font-size: 28rpx;
						font-weight: normal;
						text-align: right;
						letter-spacing: 0em;
						color: #999999;
						width: 440rpx;
					}

					.qianbox {
						text-align: right;
						width: 450rpx;
						white-space: nowrap;

						.qli {
							background: rgba(153, 153, 153, 0.1);
							padding: 3rpx 12rpx 4rpx 8rpx;
							border-radius: 178px;
							font-size: 24rpx;
							color: #3D3D3D;
							display: inline-block;
						}

						.qli:not(:first-child) {
							margin-left: 16rpx;
						}
					}
				}

				.rarr {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}

		.ti {
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}

		.mask {
			background-color: #FFFFFF;
			width: 500rpx;
			border-radius: 10px;
			padding: 30rpx;

			.jatitle {
				font-size: 28rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
			}

			.japut {
				border-bottom: 1px solid #f2f2f2;
				font-size: 24rpx;
				color: #3D3D3D;
				padding-bottom: 15rpx;
				margin-bottom: 30rpx;
			}

			.qubox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quli {
					border-radius: 8px;
					border: 1px solid #eeeeee;
					font-size: 24rpx;
					color: #999999;
					width: 220rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
				}

				.que {
					border-radius: 8px;
					border: 1px solid #45C4B0;
					background-color: #45C4B0;
					font-size: 24rpx;
					color: #ffffff;
					text-align: center;
					width: 220rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}
</style>